<template>
    <div>
        <!-- <h1>首页</h1> -->
        <!-- 头部统计 -->
        <div class="container mt20 w1000">
            <el-row>
                <el-col :span="7">
                    <span style="font-size: 25px;"><strong>{{ headerData.totalMembers }}</strong></span>
                    <p class="left">会员总数</p>
                </el-col>
                <el-col :span="7">
                    <span style="font-size: 25px"><strong>{{ headerData.activeMembers }}</strong></span>
                    <p class="left">活跃用户(近一个月有过约课的用户)</p>
                </el-col>
                <el-col :span="7">
                    <span style="font-size: 25px"><strong>{{ headerData.totalReservations }}</strong></span>
                    <p class="left">预约总数</p>
                </el-col>
                <el-col :span="3">
                    <el-button type="success" onclick="location.reload()">刷新数据</el-button>
                </el-col>

            </el-row>
        </div>
        <!-- 统计图 -->
        <div class="container mt20 w1000">
            <div ref="chartDom1" style="height: 400px;"></div>
        </div>
        <div class="container mt20 w1000">
            <div ref="chartDom2" style="height: 400px;"></div>
        </div>
        <div class="container mt20 w1000">
            <div ref="chartDom3" style="height: 600px;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { homePageInfo, statisticsOfMemberCard, statisticsOfDailyCharge, statisticsOfNewAndLostPeople } from '@/api/index'



console.log('mmmm:', import.meta.env)
console.log('mmmm:', import.meta.env.VITE_APP_URL)

//1 流失与新增
const chartDom1 = ref(null)
let myChartLine = ref(null);
const option1 = reactive({
    legend: {
        data: ['流失', '新增'],
        left: '10%'
    },
    tooltip: {},
    xAxis: {
        data: [],
        name: '',
        axisLine: { onZero: true },
        splitLine: { show: false },
        splitArea: { show: false }
    },
    yAxis: {
        name: '/人次'
    },
    grid: {
        bottom: 100
    },
    series: [
        {
            name: '流失',
            color: 'DarkGray',
            type: 'bar',
            stack: 'one',
            data: []
        },
        {
            name: '新增',
            color: 'PaleGreen',
            type: 'bar',
            stack: 'one',
            data: []
        }
    ]
})
//2 当月收费统计
const chartDom2 = ref(null)
let myChartLine2 = ref(null)
const option2 = reactive({
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['收费']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        name: '',
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        name: '收费金额',
        type: 'value'
    },
    series: [
        {
            name: '收费',
            type: 'line',
            stack: 'Total',
            data: [],
            areaStyle: {
                color: 'LightPink'
            }
        }
    ]
})
//3 会员卡统计
const chartDom3 = ref()
let myChartPie = ref(null)
const option3 = reactive({
    title: {
        text: '会员卡统计',
        subtext: '绑定会员卡数量',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'center',
        top: 'bottom',
        //  data: ['rose 1', 'rose 2', 'rose 3', 'rose 4', 'rose 5', 'rose 6', 'rose 7', 'rose 8']
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 200],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 10
            },

            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            data: []
        }
    ]
}
)

const drawer1 = () => {
    myChartLine = echarts.init(chartDom1.value)
    //todo调用后端接口获取数据
    statisticsOfNewAndLostPeople().then(res => {
        // console.log(res)
        const infoVo = res.data.data
        option1.xAxis.data = infoVo.time
        option1.xAxis.name = infoVo.xname
        option1.series[0].data = infoVo.data2
        option1.series[1].data = infoVo.data
        // 隐藏气泡
        myChartLine.hideLoading()
        // 使用刚指定的配置项和数据显示图表。
        myChartLine.setOption(option1)
    })
}
const drawer2 = () => {
    myChartLine2 = echarts.init(chartDom2.value)
    //todo调用后端接口获取数据
    statisticsOfDailyCharge().then(res => {
        //  console.log(res)
        const info = res.data.data
        option2.title.text = info.title
        option2.xAxis.data = info.time
        option2.xAxis.name = info.xname
        option2.series[0].data = info.data
        // 隐藏气泡
        myChartLine2.hideLoading()
        // 使用刚指定的配置项和数据显示图表。
        myChartLine2.setOption(option2)
    })
}

const drawer3 = () => {
    myChartPie = echarts.init(chartDom3.value)
    //todo调用后端接口获取数据
    statisticsOfMemberCard().then(res => {
        // console.log(res)
        const info1 = res.data.data
        option3.series[0].data = info1
        myChartPie.setOption(option3);
    })
}
//头部数据  
const headerData = ref({
    activeMembers: 0,
    dailyReservations: null,
    dateList: null,
    totalMembers: 50,
    totalReservations: 73,
})
const drawerHeader = () => {
    //todo调用后端接口获取数据
    homePageInfo().then(res => {
        headerData.value = res.data.data
    })
}
onMounted(async () => {
    await nextTick()
    drawer1()
    drawer2()
    drawer3()
    drawerHeader()
})

</script >
<style lang="less" scoped>
.mt20 {
    margin-top: 20px;
}

.w1000 {
    width: 1000px;
}

.box1 {
    margin-left: 10px;
    width: 300px;
}
</style>